<template>
  <div class="top-table-container">
    <el-button-group v-if="showConfig.indexOf('left') !== -1" class="table-top-left-button-container">
      <template v-for="bt in limitSizebuttons">
        <el-button :key="bt.id" type="primary" class="table-top-left-button-item" @click="clickCallBack(bt.click)">
          <svg-icon v-if="bt.icon" :icon-class="bt.icon" />
          {{ bt.buttonName }}
        </el-button>
      </template>
      <el-dropdown v-if="moreButtons && moreButtons.length > 1" trigger="click" @command="clickCallBack">
        <el-button type="primary" icon="el-icon-arrow-down" class="table-top-left-more-button-item">更多...</el-button>
        <el-dropdown-menu slot="dropdown">
          <template v-for="bt in moreButtons">
            <el-dropdown-item :key="bt.id" :command="bt.click" class="table-top-left-button-dropdown-menu">
              <svg-icon :icon-class="bt.icon" />
              {{ bt.buttonName }}
            </el-dropdown-item>
          </template>
        </el-dropdown-menu>
      </el-dropdown>
    </el-button-group>
    <el-button-group v-if="showConfig.indexOf('right') !== -1" class="table-top-right-button-container">
      <el-tooltip :disabled="searchTooltipDisabled" effect="light" content="折叠搜索框" placement="top-start">
        <el-button v-if="showConfig.indexOf('filter') !== -1" icon="el-icon-search" class="table-top-right-button-item" @click="switchShowFilterContainer" />
      </el-tooltip>
      <el-tooltip :disabled="refreshTooltipDisabled" effect="light" content="刷新" placement="top-start">
        <el-button v-if="showConfig.indexOf('refresh') !== -1" icon="el-icon-refresh" class="table-top-right-button-item" @click="refresh" />
      </el-tooltip>
      <el-popover v-if="showConfig.indexOf('colCheck') !== -1" placement="bottom-end" width="150" trigger="click" @show="getTableFields">
        <el-button slot="reference" icon="el-icon-s-grid" class="table-top-right-button-item">
          <i class="fa fa-caret-down" aria-hidden="true" />
        </el-button>
        <el-checkbox v-model="allColumnsSelected" :indeterminate="allColumnsSelectedIndeterminate" @change="handleCheckAllChange">
          全选
        </el-checkbox>
        <el-checkbox-group v-model="checkedTableColumns" :min="1" @change="handleCheckedTableColumnsChange">
          <el-checkbox v-for="item in tableColumns" :key="item.property" :label="item.property">
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-popover>
    </el-button-group>
  </div>
</template>

<script>
export default {
  name: 'TopButton',
  props: {
    // 顶级父类
    baba: {
      type: Object,
      required: true
    },
    // 直属父类
    up: {
      type: Object,
      required: true
    },
    // 当前页面的所有顶部按钮,配合commonTable使用
    buttons: {
      type: Array,
      default: _ => []
    },
    // 单个使用此组件
    position: {
      type: String,
      default: ''
    },
    /**
     * 顶部按钮显示配置
     * left 显示左侧全部按钮
     * right 是否显示右侧按钮
     * filter 显示右侧示过滤容器按钮
     * refresh 显示右侧刷新列表按钮
     * colCheck 显示右侧选择列表显示字典按钮
     */
    showConfig: {
      type: String,
      default: 'left'
    },
    tableKey: {
      type: String,
      default: 'table'
    }
  },
  data() {
    return {
      limitSizebuttons: [], moreButtons: [],
      allColumnsSelected: true, allColumnsSelectedIndeterminate: false, tableColumns: [], checkedTableColumns: [], allTableColumns: [],
      searchTooltipDisabled: false, refreshTooltipDisabled: false
    }
  },
  created() {
    this.getButtons(8)
  },
  methods: {
    clickCallBack(val) {
      this.baba[val]()
    },
    // maxShowButtonNumber 最多显示的按钮个数 多余的 buttonsLength - maxShowButtonNumber 合并为一个按钮下拉显示
    getButtons(maxShowButtonNumber) {
      let currentMenuButtons
      // 设置了 postion, 单独使用此组件时,获取列表顶部按钮
      if (this.position) {
        const metaButtons = this.$route.meta.buttons
        currentMenuButtons = (metaButtons !== null && metaButtons !== undefined) ? metaButtons[this.position] : []
      } else {
        currentMenuButtons = this.buttons
      }
      const buttonsLength = currentMenuButtons ? currentMenuButtons.length : 0
      if (buttonsLength > maxShowButtonNumber) {
        this.limitSizebuttons = currentMenuButtons.slice(0, maxShowButtonNumber - 1)
        this.moreButtons = currentMenuButtons.slice(maxShowButtonNumber - 1, buttonsLength)
      } else {
        this.limitSizebuttons = currentMenuButtons
        this.moreButtons = []
      }
    },
    // 隐藏/显示过滤栏
    switchShowFilterContainer() {
      this.searchTooltipDisabled = true
      this.up.switchShowFilterContainer()
    },
    // 刷新列表
    refresh() {
      this.refreshTooltipDisabled = true
      this.up.listData()
    },
    getTableFields() {
      if (!this.tableColumns || this.tableColumns.length === 0) {
        const tableColumnArray = []
        const allTableColumnArray = []
        this.baba.$refs[this.tableKey].columns.forEach(r => {
          tableColumnArray.push({
            label: r.label,
            property: r.property
          })
          allTableColumnArray.push(r.property)
        })
        this.tableColumns = tableColumnArray
        this.checkedTableColumns = allTableColumnArray
        this.allTableColumns = allTableColumnArray
      }
    },
    handleCheckAllChange(val) {
      if (val === false) {
        this.allColumnsSelected = true
        return
      }
      this.checkedTableColumns = val ? this.allTableColumns : []
      this.allColumnsSelectedIndeterminate = false
    },
    handleCheckedTableColumnsChange(value) {
      const checkedCount = value.length
      this.allColumnsSelected = checkedCount === this.tableColumns.length
      this.allColumnsSelectedIndeterminate = checkedCount > 0 && checkedCount < this.tableColumns.length
    }
  }
}
</script>
<style lang="scss" scoped>
.top-table-container{
  margin: 12px 0;
  .table-top-left-button-container{
    width: calc(100% - 280px);
    .table-top-left-button-item{
      margin-right: 8px !important;
    }
    .table-top-left-more-button-item{
      top: 0;
      margin-right: 8px !important;
    }
  }
  .table-top-right-button-container{
    // 无左侧按钮时需要此
    margin-bottom: 12px;
    float: right;
    .table-top-right-button-item{
      margin-left: 8px !important;;
    }
  }
}
.table-top-left-button-dropdown-menu{
  padding: 8px 17px !important;
}
</style>
